<template>
	<view>
		<view class="list">
			<view class="list-top">
				<view class="top-item" @click="selectAddress('take')">
					<view class="item-top">
						<view class="item-top-left">
							<view class="item-icon">
								<image src="/static/images/take.png" mode="widthFix"></image>
							</view>
							<view class="item-name" v-if="takePeople.consignee">
								<text>{{takePeople.consignee || ''}}  {{takePeople.mobile || ''}}</text>
							</view>
						</view>
						<view class="item-top-right">
							<view class="right-icon">
								<image src="/static/images/address-book.png" mode="widthFix"></image>
							</view>
							<view class="right-title">
								<text>地址库</text>
							</view>
						</view>
					</view>
					<view class="item-center">
						<view class="center-detail">
							<view class="center-address" v-if="takePeople.consignee">
								<text>{{takePeople.province || ''}} {{takePeople.city || ''}} {{takePeople.district || ''}} {{takePeople.address || ''}}</text>
							</view>
							<view class="center-info" @click.stop="insertGoods">
								<block v-if="goodsList && goodsList.length">
									<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
										<view class="info-left">
											<text>货物信息</text>
										</view>
										<view class="info-right">
											<view class="right-text">
												<text>{{item.good_quantity}}/{{item.good_number}}个/{{item.good_size}}件/{{item.good_type}}</text>
											</view>
											<view class="right-image">
												<image src="/static/images/right1.png" mode="widthFix"></image>
											</view>
										</view>
									</view>
								</block>
								<block v-else>
									<view class="goods-tips">请完善货物信息</view>
								</block>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="choice">
				<picker mode="selector" :disabled="disabled" :range="warehouseList" range-key="name" @change="warehouseChange">
					<view class="choice-item">
						<view class="choice-item-left">
							<text>仓库选择</text>
						</view>
						<view class="choice-item-right">
							<view class="right-title" :style="selectedWarehouse.warehouse_id ? 'color: #333;font-weight: bold;' : ''">
								<text>{{selectedWarehouse.name || '请选择'}}</text>
							</view>
							<view class="right-icon">
								<image src="/static/images/right1.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</picker>
			</view>
		</view>
		<view class="bottom" v-if="!disabled">
			<view class="bottom-content">
				<view class="bottom-btn" @click="submitConfirm">
					<text>确认取件</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getFaceList} from '@/api/index.js';
	import {
		pickExpressAppointmentInsertOrEdit,
		appointmentOrderDetail,
		appointmentOrderEdit
	} from '@/api/order.js';
	export default {
		data() {
			return {
				type: 'save',
				id: 0,
				info: {},
				warehouseList: [],
				selectedWarehouse: {},
				takePeople: {},
				goodsList: []
			}
		},
		async onLoad(options) {
			uni.$on('perfectGoods', data => {
				this.goodsList = this.id ? [data] : data;
			});
			uni.$on('selectAddress', data => {
				this.takePeople = data;
			});
			if (options.id) {
				this.id = options.id;
			}
			if (options.type) {
				this.type = options.type;
			}
			await this.loadData();
		},
		computed: {
			disabled() {
				return this.type == 'detail';
			}
		},
		onUnload() {
			uni.$off('perfectGoods');
			uni.$off('selectAddress');
		},
		methods: {
			async submitConfirm() {
				try{
					if (!this.takePeople.consignee) {
						throw new Error('请选择取件人信息');
					}
					if (!this.goodsList || !this.goodsList.length) {
						throw new Error('请完善货物信息');
					}
					if (!this.selectedWarehouse.warehouse_id) {
						throw new Error('请先择仓库');
					}
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					for (let item of this.goodsList) {
						if (this.id) {
							let data = {
								recorded_id: this.id,
								warehouse: this.selectedWarehouse.warehouse_id,
								good: [{
									id: this.info.good_address_lift_id,
									good_number: item.good_number,
									good_quantity: item.good_quantity,
									good_size: item.good_size,
									good_type: item.good_type
								}],
								name: this.takePeople.consignee,
								phone: this.takePeople.mobile,
								province: this.takePeople.province,
								city: this.takePeople.city,
								district: this.takePeople.district,
								lift_address: this.takePeople.address
							};
							await appointmentOrderEdit(data);
						} else {
							let data = {
								is_pc: 1,
								warehouse: this.selectedWarehouse.warehouse_id,
								come_type: 2,
								name: this.takePeople.consignee,
								phone: this.takePeople.mobile,
								province: this.takePeople.province,
								city: this.takePeople.city,
								district: this.takePeople.district,
								lift_address: this.takePeople.address,
								good: [item]
							};
							await pickExpressAppointmentInsertOrEdit(data);
						}
					}
					uni.hideLoading();
					uni.showToast({
						title: '操作成功',
						icon: 'none',
						mask: true
					});
					if (this.id) {
						this.$msx.prevPage().pullOrderList();
						setTimeout(() => uni.navigateBack(), 1000);
						return;
					}
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/order/order?type=notWarehousing&orderTypeSelectedIndex=2&tabsIndex=1'
						});
					}, 1000);
				}catch(e){
					uni.hideLoading();
					//TODO handle the exception
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			},
			warehouseChange(event) {
				this.selectedWarehouse = this.warehouseList[event.detail.value];
			},
			insertGoods() {
				if (this.disabled) {
					return;
				}
				let url = '/pages/receive/goods';
				if (!this.id) {
					url += '?type=multiple';
				}
				uni.navigateTo({
					url
				});
			},
			selectAddress(mold) {
				if (this.disabled) {
					return;
				}
				uni.navigateTo({
					url: `/pages/address/index?type=select&mold=${mold}`
				});
			},
			async loadData() {
				await this.loadWarehouseList();
				await this.loadAppointmentOrderDetail();
			},
			async loadWarehouseList() {
				try{
					let res = await getFaceList();
					this.warehouseList = res.data?.warehouse || [];
				}catch(e){
					//TODO handle the exception
					console.log(e);
				}
			},
			async loadAppointmentOrderDetail() {
				try{
					if (!this.id) {
						return;
					}
					uni.showLoading({
						title: '加载中'
					});
					let res = await appointmentOrderDetail(this.id);
					this.info = res.data;
					
					this.warehouseList.every(item => {
						if (item.warehouse_id == this.info.warehouse_id) {
							this.selectedWarehouse = item;
							return false;
						}
						return true;
					});
					
					this.takePeople = {
						province: this.info.order_lift_address.province,
						city: this.info.order_lift_address.city,
						district: this.info.order_lift_address.district,
						address: this.info.order_lift_address.lift_address,
						consignee: this.info.order_lift_address.name,
						mobile: this.info.order_lift_address.phone
					};
					
					this.goodsList = [{
						good_size: this.info.order_lift_address.good_size,
						good_number: this.info.order_lift_address.good_size,
						good_quantity: this.info.order_lift_address.good_quantity.join('/'),
						good_type: this.info.order_lift_address.good_size
					}];
				}catch(e){
					console.log(e);
				} finally {
					uni.hideLoading();
				}
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: #FFF;
}
.list{
	padding: 30rpx;
	box-sizing: border-box;
	.list-top{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		padding-top: 30rpx;
		.top-item{
			
			.item-top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 30rpx;
				box-sizing: border-box;
				.item-top-left{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.item-icon{
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width: 48rpx;
							height: 48rpx;
						}
					}
					.item-name{
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
						padding-left: 14rpx;
					}
				}
				.item-top-right{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 144rpx;
					height: 52rpx;
					border-radius: 28rpx;
					// border: 2rpx solid #E9E9E9;
					.right-icon{
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width: 24rpx;
							height: 26rpx;
						}
					}
					.right-title{
						margin-left: 10rpx;
						font-size: 24rpx;
						color: #333;
						font-weight: bold;
					}
				}
			}
			.item-center{
				width: 100%;
				padding-left: 24rpx;
				padding-top: 12rpx;
				box-sizing: border-box;
				.center-detail{
					padding: 0 30rpx 32rpx 36rpx;
					box-sizing: border-box;
					
					.center-address{
						font-size: 26rpx;
						color: #666;
						font-weight: 500;
						line-height: 40rpx;
					}
					.center-info{
						margin-top: 14rpx;
						
						.goods-item {
							margin-bottom: 20rpx;
							background: #F5F5F5;
							border-radius: 12rpx;
							padding: 24rpx;
							box-sizing: border-box;
							display: flex;
							justify-content: space-between;
							align-items: center;
							
							.info-left{
								font-size: 26rpx;
								color: #666;
								font-weight: 500;
							}
							.info-right{
								display: flex;
								justify-content: flex-end;
								align-items: center;
								.right-text{
									font-size: 26rpx;
									color: #333;
									font-weight: bold;
									padding-right: 8rpx;
								}
								.right-image{
									display: flex;
									justify-content: center;
									align-items: center;
									image{
										width: 12rpx;
										height: 20rpx;
									}
								}
							}
						}
						
						
						.goods-item:last-of-type {
							margin-bottom: 0;
						}
						
						.goods-tips {
							background: #F5F5F5;
							border-radius: 12rpx;
							width: 100%;
							padding: 30rpx 0;
							color: #E82E2E;
							font-weight: 500;
							font-size: 32rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}
	.choice{
		margin-top: 20rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.choice-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #F5F5F5;
			&:last-child{
				border: none;
			}
			.choice-item-left{
				font-size: 28rpx;
				color: #666;
				font-weight: 500;
			}
			.choice-item-right{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.right-title{
					font-size: 28rpx;
					color: #999;
					font-weight: 500;
					padding-right: 14rpx;
				}
				.right-icon{
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 12rpx;
						height: 20rpx;
					}
				}
			}
		}
	}
}
.bottom{
	.bottom-content{
		position: fixed;
		bottom: 40rpx;
		padding: 0 30rpx;
		width: 100%;
		box-sizing: border-box;
		.bottom-btn{
			margin-top: 26rpx;
			width: 100%;
			height: 88rpx;
			background: #E82E2E;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			color: #FFF;
			font-weight: bold;
		}
	}
}
</style>
